<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar title="申请报价" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="sqbjRuleForm" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="预计开工日期" borderBottom>
								<picker mode="date" :start="pickerMin" :value="pickerStartVal" @change="confirmFunc('start_date', $event)">
									<u--input
										placeholder="预计开工日期"
										inputAlign="left"
										v-model="sqbjRuleForm.start_date"
										border="none"
										color="#000000"
										fontSize="28rpx"
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
										placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
									></u--input>
								</picker>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="预计完工日期" borderBottom>
								<view v-if="!sqbjRuleForm.start_date" @click="showToastFunc('请先选择预计完工日期')">
									<u--input
										placeholder="预计完工日期"
										inputAlign="left"
										v-model="sqbjRuleForm.end_date"
										border="none"
										color="#c8c9cc"
										fontSize="28rpx"
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
										placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
									></u--input>
								</view>
								<picker v-else mode="date" :start="pickerMin" :value="pickerEndtVal" @change="confirmFunc('end_date', $event)">
									<u--input
										placeholder="预计完工日期"
										inputAlign="left"
										v-model="sqbjRuleForm.end_date"
										border="none"
										color="#000000"
										fontSize="28rpx"
										disabled
										disabledColor="#ffffff"
										suffixIcon="arrow-right"
										suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
										placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
									></u--input>
								</picker>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="预计工期" borderBottom v-if="sqbjRuleForm.expect_duration_days">
								<u--input
									placeholder="预计工期"
									inputAlign="left"
									v-model="sqbjRuleForm.expect_duration_days"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="备注">
								<u--textarea
									disableDefaultPadding
									v-model="sqbjRuleForm.remark"
									border="none"
									placeholder="备注"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						text="提交"
						@click="submit"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
		</pageTxt>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			sqbjRuleForm: {
				project_id: '',
				start_date: '',
				end_date: '',
				expect_duration_days: '',
				remark: ''
			},
			pickerStartVal: '', //当前显示开工日期
			pickerEndtVal: '', //当前显示完工日期
			pickerMin: '' //日期最小选择
		};
	},
	onLoad(option) {
		const d = new Date();
		const year = d.getFullYear();
		let month = d.getMonth() + 1;
		month = month < 10 ? `0${month}` : month;
		const date = d.getDate();
		this.pickerMin = `${year}-${month}-${date + 1}`;
		this.pickerStartVal = `${year}-${month}-${date + 1}`;
		this.sqbjRuleForm.project_id = option.id;
	},
	methods: {
		// 日期选择
		confirmFunc(type, e) {
			this.sqbjRuleForm[type] = e.detail.value;
			this.$nextTick(() => {
				if (type == 'start_date') {
					this.pickerMin = e.detail.value;
					this.sqbjRuleForm.end_date = '';
					this.sqbjRuleForm.expect_duration_days = '';
					this.pickerEndtVal = this.sqbjRuleForm.end_date || this.sqbjRuleForm.start_date;
				} else {
					const d = new Date();
					const year = d.getFullYear();
					let month = d.getMonth() + 1;
					month = month < 10 ? `0${month}` : month;
					const date = d.getDate();
					this.pickerMin = `${year}-${month}-${date + 1}`;
					this.pickerEndtVal = this.sqbjRuleForm.start_date;
					const date1 = new Date(this.sqbjRuleForm.start_date);
					const date2 = new Date(this.sqbjRuleForm.end_date);
					this.sqbjRuleForm.expect_duration_days = this.daysBetween(date1, date2) + 1;
				}
			});
		},
		// 两个日期差值
		daysBetween(date1, date2) {
			const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
			const firstTime = date1.getTime();
			const secondTime = date2.getTime();

			return Math.round(Math.abs((firstTime - secondTime) / oneDay));
		},
		submit() {
			let sqbjRuleForm = this.sqbjRuleForm;
			if (!sqbjRuleForm.start_date) {
				uni.showToast({
					title: '请选择开工日期',
					icon: 'error'
				});
			}
			if (!sqbjRuleForm.end_date) {
				uni.showToast({
					title: '请选择完工日期',
					icon: 'error'
				});
			}
			this.applyQuotation(sqbjRuleForm);
		},
		// 申请报价
		applyQuotation(data) {
			uni.showLoading({
				mask: true
			});
			this.$Api.applyQuotation(data).then((res) => {
				console.log(res, '申请报价');
				uni.hideLoading();
				if (res.code == 200) {
					setTimeout(() => {
						var currentPages = getCurrentPages()[getCurrentPages().length - 2]
						if (currentPages) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}, 500);
				}
				uni.showToast({
					title: res.code == 200 ? '操作成功' : res.message,
					icon: res.code == 200 ? 'success' : 'error'
				});
			});
		},
		showToastFunc(title) {
			uni.showToast({
				title,
				icon: 'error'
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
